<template>
    <div style="width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 80;transition: background-color .3s cubic-bezier(0.1,0.9,0.2,1);"
        :style="{
            backgroundColor: config.show ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0)',
            pointerEvents: config.show ? 'all' : 'none',
        }">
        <div @click="config.closeAll()"
            style="width: 100%;height: 100px;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;font-size: 12px;color: white;">

        </div>
        <div style="width: 100%;height: calc(90%);position: absolute;left: 0;bottom: 0;background-color: white;border-radius: 16px 16px 0 0;transition: transform .3s cubic-bezier(0.1,0.9,0.2,1);"
            :style="{
                transform: `translate(0%,${config.board.top}00%)`,
                boxShadow: config.show ? ' 0 0px 10px rgba(0,0,0,0.5)' : 'unset'
            }">
            <div style="width: 100%;height: 48px;position: relative;background-color: rgb(230,230,230);">
                <div style="width: 48px;height: 48px;position: absolute;top: 0;left: 0;">
                    <div v-if="config.list.length > 1" @click="config.closeTop()"
                        style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" height="19px" viewBox="0 -960 960 960" width="19px"
                            fill="#333">
                            <path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z" />
                        </svg>
                    </div>
                </div>
                <div
                    style="position: absolute;left: 48px;height: 100%;width: calc(100% - 48px - 48px);display: inline-block;">
                    <div
                        style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;white-space: no-wrap;text-overflow: ellipsis;">
                        {{ config.list.length ? config.list[config.list.length - 1].title : '' }}
                    </div>
                </div>
                <div v-if="config.list.length" style="width: 48px;height: 48px;position: absolute;top: 0;right: 0;">
                    <div v-if="false" @click="config.closeAll()"
                        style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
                            fill="#333">
                            <path
                                d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
                        </svg>
                    </div>
                    <div v-if="config.list[config.list.length - 1].okButtonCallback !== undefined" @click="async () => {
                        try {
                            await config.list[config.list.length - 1].okButtonCallback(config.list[config.list.length - 1].refreshPage)
                        } catch (error) {

                        }
                    }"
                        style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 15px;color: rgb(0,120,215);">
                        {{ config.list[config.list.length - 1].okButtonText }}
                    </div>
                </div>
            </div>
            <div v-for="(item, index) in config.list"
                style="width: 100%;height: calc(100% - 48px);position: absolute;left: 0;bottom: 0;z-index: 81;transition: left .3s cubic-bezier(0.1,0.9,0.2,1);overflow-y: auto;background-color: rgb(230,230,230);padding-bottom: 24px;"
                :style="{
                    transform: `translateX(calc(${index}00%))`,
                    left: `${config.board.left}00%`
                }">
                <div v-for="subItem in item.pageDisplayObj" style="width: 100%;padding: 4px 16px;">
                    <div style="width: 100%;font-size: 14px;padding-left: 12px;color: dimgray;white-space: pre-wrap;">
                        {{ subItem.title }}
                    </div>
                    <div style="width: 100%;border-radius: 8px;background-color: white;">
                        <div v-for="subItem2 in subItem.list" :class="subItem2.disabled ? '' : 'button'" @click="async () => {
                            if (!subItem2.disabled) {
                                try {
                                    if (subItem2.right && subItem2.right.type === 'switch') {
                                        await subItem2.callBack(!subItem2.right.value)
                                    } else {
                                        await subItem2.callBack()
                                    }
                                } catch (error) {
                                    console.log(error)
                                }
                            }
                        }"
                            style="width: 100%;height: 45px;display: flex;align-items: center;justify-content: center;padding: 0 12px;">
                            <div
                                style="height: 100%;width: 100%;min-width: max-content;white-space: nowrap;text-overflow: ellipsis;word-break: keep-all;display: flex;align-items: center;justify-content: flex-start;">
                                {{ subItem2.title }}
                            </div>
                            <div
                                style="height: 100%;width: 100%;min-width: max-content;white-space: nowrap;text-overflow: ellipsis;word-break: keep-all;display: flex;align-items: center;justify-content: flex-end;font-size: 14px;color: gray;">
                                <span v-if="subItem2.right && subItem2.right.type === 'text'">{{ subItem2.right.value
                                    }}</span>
                                <svg v-else-if="subItem2.right && subItem2.right.type === 'switch' && subItem2.right.value"
                                    xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960"
                                    width="32px" fill="rgb(0,120,215)">
                                    <path
                                        d="M280-240q-100 0-170-70T40-480q0-100 70-170t170-70h400q100 0 170 70t70 170q0 100-70 170t-170 70H280Zm400-120q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z" />
                                </svg>
                                <svg v-else-if="subItem2.right && subItem2.right.type === 'switch' && !subItem2.right.value"
                                    xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960"
                                    width="32px" fill="#333">
                                    <path
                                        d="M280-240q-100 0-170-70T40-480q0-100 70-170t170-70h400q100 0 170 70t70 170q0 100-70 170t-170 70H280Zm0-80h400q66 0 113-47t47-113q0-66-47-113t-113-47H280q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-40q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm200-120Z" />
                                </svg>
                                <svg v-else xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960"
                                    width="16px" fill="#333">
                                    <path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-if="config.mask" style="width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 85;">

    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import tool from '../tool'
import { nextTick } from 'vue'

const config = reactive({
    list: [],
    show: false,
    board: {
        top: 1,
        left: 0
    },
    mask: false,
    async add(pageFn, title, okButtonCallback, okButtonText) {
        try {
            const refreshPage = async () => {
                o.pageDisplayObj = await o.pageRefresher()
                this.list.push({})
                await nextTick()
                this.list.pop()
            }
            const o = {
                pageRefresher: () => { },
                pageDisplayObj: {},
                pageFn,
                title,
                okButtonCallback,
                okButtonText,
                refreshPage
            }
            o.pageRefresher = await pageFn(refreshPage)
            o.pageDisplayObj = await o.pageRefresher()
            this.list.push(o)
            await tool.wait(0.01)
            if (this.list.length - 1) {
                this.board.left--
            } else {
                this.show = true
                this.board.top = 0
            }
        } catch (error) {
            tool.controls.toast.show({
                content: `${error}`,
                icon: 'error'
            })
        }
    },
    async closeAll() {
        this.show = false
        this.board.top = 1
        this.board.left = 0
        this.mask = true
        await tool.wait(0.3)
        this.mask = false
        this.list = []
    },
    async closeTop() {
        if (this.list.length === 0) return
        if (this.list.length === 1) {
            this.mask = true
            this.show = false
            this.board.top = 1
            await tool.wait(0.3)
            this.mask = false
            this.list = []
        } else {
            this.mask = true
            this.board.left++
            await tool.wait(0.3)
            this.list.pop()
            this.mask = false
        }
    }
})

tool.store.onChange('settings', (e) => {
    if (e.type === 'show') {
        config.add(e.pageFn, e.title, e.okButtonCallBack, e.okButtonText)
    }
    if (e.type === 'closeAll') {
        config.closeAll()
    }
    if (e.type === 'closeTop') {
        config.closeTop()
    }
})

onMounted(async () => {

})

</script>

<style scoped>
.button {}

.button:active {
    background-color: rgba(0, 0, 0, 0.03);
}
</style>